<div class="jzjc">

    <!-- 新增模式 -->
    <ng-container *ngIf="detail.mode==='add';else wholePart">
        <ng-container *ngTemplateOutlet="editTemp"></ng-container>
        <ng-container *ngTemplateOutlet="saveBar_main"></ng-container>
    </ng-container>

    <ng-template #wholePart>
        <div nz-row>
            <div nz-col nzSpan="8">
                <ng-container *ngTemplateOutlet="editTemp"></ng-container>
            </div>
            <div nz-col nzSpan="16">
                <ng-container *ngTemplateOutlet="zgPanel"></ng-container>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="8">
                <ng-container *ngTemplateOutlet="saveBar_main"></ng-container>
            </div>
            <div nz-col nzSpan="16">
                <ng-container *ngTemplateOutlet="saveBar_zgqk"></ng-container>
            </div>
        </div>
    </ng-template>






    <!-- 表单修改模式 -->
    <ng-template #editTemp>
        <div class="detail detailPanel">
            <nz-descriptions [nzTitle]="null" nzBordered nzSize="small" [nzColumn]="detail.mode==='add'?2:1">
                <nz-descriptions-item nzTitle="分析台*">
                    <ng-container *ngIf="['add'].includes(detail.mode) && pc === 'all';else fxtRdTemp">
                        <nz-select nzAllowClear [(ngModel)]="detail.data.pc"
                            (ngModelChange)="detail.onChangeFxt($event)" class="table-content">
                            <nz-option *ngFor="let option of jzjcTool.fxtList" [nzLabel]="option.opName"
                                [nzValue]="option.opValue">
                            </nz-option>
                        </nz-select>
                    </ng-container>
                    <ng-template #fxtRdTemp>
                        {{detail.data._fxtName}}
                    </ng-template>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="车站*">
                    <input *ngIf="['add','edit','edit_notBm'].includes(detail.mode);else czRdTemp" nz-input
                        [(ngModel)]="detail.data.stationname" [nzAutocomplete]="auto_station"
                        (ngModelChange)="onChange_cz($event)" (click)="onChange_cz()" style="width: 150px;" />
                    <nz-autocomplete #auto_station nzWidth="200px">
                        <nz-auto-option *ngFor="let opt of czList_filter" [nzValue]="opt.STATIONNAME"
                            [nzLabel]="opt.STATIONNAME">
                            {{opt.STATIONNAME}}
                        </nz-auto-option>
                    </nz-autocomplete>
                    <ng-template #czRdTemp>
                        {{detail.data.stationname}}
                    </ng-template>
                    <!-- <nz-tree-select (ngModelChange)="stationChange($event)" nzShowSearch [nzDropdownStyle]="treeNodeStyle"
                        nzPlaceHolder="请选择车站" [nzNodes]="stationNodes" [(ngModel)]="detail.data.stationid">
                    </nz-tree-select> -->
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="设备类型*" *ngIf="['add','edit','edit_notBm'].includes(detail.mode);">
                    <nz-tree-select style="width:200px;" (ngModelChange)="devTypeChange($event,'')" nzShowSearch
                        [nzDropdownStyle]="treeNodeStyle" nzPlaceHolder="先选车站再选类型" [nzNodes]="sblxNodes"
                        [(ngModel)]="detail.data.devTypeId">
                    </nz-tree-select>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="设备名称*">
                    <nz-select *ngIf="['add','edit','edit_notBm'].includes(detail.mode);else sbmcTemp"
                        style="width:200px;" nzPlaceHolder="请先选设备类型，再选设备名称" nzShowSearch
                        [(ngModel)]="detail.data.devId">
                        <nz-option *ngFor="let data of sbmcList" [nzValue]="data.ID" [nzLabel]="data.VC_NAME">
                            {{data.VC_NAME}}</nz-option>
                    </nz-select>
                    <ng-template #sbmcTemp>
                        {{detail.data.devName}}
                    </ng-template>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="问题类型*">
                    <nz-select *ngIf="['add','edit','edit_notBm'].includes(detail.mode);else wtlxRdTemp"
                        [(ngModel)]="detail.data.problemtypeid" class="table-content">
                        <nz-option *ngFor="let data of jzjcTool.wtlxList" [nzValue]="data.opValue"
                            [nzLabel]="data.opName">
                            {{data.opName}}
                        </nz-option>
                    </nz-select>
                    <ng-template #wtlxRdTemp>
                        {{detail.data.problemtype}}
                    </ng-template>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="问题等级*">
                    <nz-select *ngIf="['add','edit','edit_notBm'].includes(detail.mode);else wtdjRdTemp"
                        [(ngModel)]="detail.data.problemlevel" class="table-content"
                        (ngModelChange)="detail.onChangeWtdj($event)">
                        <nz-option *ngFor="let data of jzjcTool.wtdjArr" [nzValue]="data.opValue"
                            [nzLabel]="data.opName">
                            {{data.opName}}
                        </nz-option>
                    </nz-select>
                    <ng-template #wtdjRdTemp>
                        {{detail.data._problemlevelShow}}
                    </ng-template>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="问题内容*" [nzSpan]="detail.mode==='add'?2:1">
                    <textarea *ngIf="['add','edit','edit_notBm'].includes(detail.mode);else wtnrRdTemp" nz-input
                        [(ngModel)]="detail.data.problem" class="table-content" [nzAutosize]="{maxRows:10}"></textarea>
                    <ng-template #wtnrRdTemp>
                        <!-- <textarea nz-input [(ngModel)]="detail.data.problem" class="table-content" readonly></textarea> -->
                        {{detail.data.problem}}
                    </ng-template>
                </nz-descriptions-item>

                <ng-container *ngIf="['add','edit','edit_onlyBm','edit_onlyBms'].includes(detail.mode);else bmRdTemp">
                    <nz-descriptions-item nzTitle="责任部门*">
                        <nz-tree-select class="table-content" [nzDropdownMatchSelectWidth]="false"
                            [nzDropdownStyle]="{ 'max-height': '300px' }" [(ngModel)]="detail.data.chargeorg"
                            [nzNodes]="jzjcTool.bmList" (ngModelChange)="detail.onChangeZrbm($event)">
                        </nz-tree-select>
                    </nz-descriptions-item>
                </ng-container>
                <ng-template #bmRdTemp>
                    <nz-descriptions-item nzTitle="责任部门*">
                        {{detail.data.chargeorgname}}
                    </nz-descriptions-item>
                </ng-template>

                <ng-container
                    *ngIf="['add','edit','edit_onlyBm','edit_onlyBms','edit_onlyZrr'].includes(detail.mode);else zrrRdTemp">
                    <nz-descriptions-item nzTitle="责任人*">
                        <nz-select [(ngModel)]="detail.data.charger" class="table-content">
                            <nz-option nzValue="" nzLabel="请选择"></nz-option>
                            <nz-option *ngFor="let data of jzjcTool.peopleList" [nzValue]="data.opName"
                                [nzLabel]="data.opName">
                            </nz-option>
                        </nz-select>
                    </nz-descriptions-item>
                </ng-container>

                <ng-template #zrrRdTemp>
                    <nz-descriptions-item nzTitle="责任人">
                        {{detail.data.charger}}
                    </nz-descriptions-item>
                </ng-template>

                <nz-descriptions-item nzTitle="整改日期*">
                    <nz-date-picker *ngIf="['add','edit','edit_notBm'].includes(detail.mode);else zgrqRdTemp"
                        [(ngModel)]="detail.data._rectdate"></nz-date-picker>
                    <ng-template #zgrqRdTemp>
                        {{detail.data.rectdate}}
                    </ng-template>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="备注" [nzSpan]="detail.mode==='add'?2:1">
                    <textarea *ngIf="['add','edit','edit_notBm'].includes(detail.mode);else bzRdTemp" nz-input
                        [(ngModel)]="detail.data.note" class="table-content" [nzAutosize]="{maxRows:10}"></textarea>
                    <ng-template #bzRdTemp>
                        {{detail.data.note}}
                    </ng-template>
                </nz-descriptions-item>
            </nz-descriptions>
        </div>
    </ng-template>

    <!-- 左侧保存栏 -->
    <ng-template #saveBar_main>
        <div class="btnBar detailPanel"
            *ngIf="['add','edit','edit_notBm','edit_onlyBm','edit_onlyBms','edit_onlyZrr'].includes(detail.mode);else bzRdTemp">
            <ng-container *ngFor="let foot of detail.footer">
                <button *ngIf="foot.show" nz-button (click)="foot.onClick()" [nzType]="foot.btnType">
                    {{foot.label}}
                </button>
            </ng-container>
        </div>
    </ng-template>

    <!-- 整改情况 -->
    <ng-template #zgqk>
        <div *ngIf="detail.zgMode==='edit'">
            <nz-divider></nz-divider>
            <div class="detailTitle">
                整改情况：
            </div>
            <textarea nz-input [(ngModel)]="detail.zgqk.content" [nzAutosize]="{maxRows:10}"></textarea>
        </div>
    </ng-template>

    <!-- 整改保存栏 -->
    <ng-template #saveBar_zgqk>
        <div class="btnBar detailPanel" *ngIf="detail.zgMode==='edit'">
            <button nz-button nzType="primary" (click)="addZgqk('add')">
                保存
            </button>
            <button nz-button nzType="primary" (click)="addZgqk('edit')">
                修改
            </button>
        </div>
    </ng-template>


    <!-- 整改历史列表 -->
    <ng-template #zgqkList>
        <div>
            <nz-spin [nzSpinning]="detail.tableLoading">
                <div class="detailTitle">整改历史</div>
                <nz-table #basicTable2 [nzData]="detail.tableData" nzSize="small" [nzLoadingDelay]="1000" nzBordered
                    [nzShowPagination]="false" [nzFrontPagination]="false" [nzScroll]="lockHeadScroll">
                    <thead>
                        <tr>
                            <th nzAlign="center" nzWidth="20%">处理时间</th>
                            <th nzAlign="center" nzWidth="20%">处理部门</th>
                            <th nzAlign="center" nzWidth="20%">处理人</th>
                            <th nzAlign="center">整改情况</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of basicTable2.data;index as i" (dblclick)="setEditInfo(data)" nz-tooltip
                            nzTooltipTitle="双击修改" nzTooltipPlacement="bottom" style="cursor:pointer">
                            <td nzAlign="center">
                                <div class="cmiddle" style="max-height:105px;">
                                    {{data.createdate||''}}
                                </div>
                            </td>
                            <td nzAlign="center">
                                <div class="cmiddle" style="max-height:105px;">
                                    {{data.orgname}}
                                </div>
                            </td>
                            <td>
                                <div class="cmiddle" style="max-height:105px;">
                                    {{data.operator}}
                                </div>
                            </td>
                            <td>
                                <!-- <div class="cmiddle" style="max-height:105px;">{{data.content}}</div> -->
                                <textarea nz-input [nzAutosize]="{maxRows:10}" class="table-textarea"
                                    readonly>{{data.content}}</textarea>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </nz-spin>
        </div>
    </ng-template>
    <!-- 右侧整改面板 -->
    <ng-template #zgPanel>
        <div *ngIf="['detail','edit'].includes(detail.zgMode);" class="detailPanel">
            <ng-container *ngTemplateOutlet="zgqkList"></ng-container>
            <ng-container *ngTemplateOutlet="zgqk"></ng-container>
        </div>
    </ng-template>

</div>